﻿<!doctype html>
<!--[if lt IE 7 ]>

<html lang="en" class="ie6">


<![endif]-->
<!--[if IE 7 ]>

<html lang="en" class="ie7">


<![endif]-->
<!--[if IE 8 ]>

<html lang="en" class="ie8">


<![endif]-->
<!--[if IE 9 ]>

<html lang="en" class="ie9">


<![endif]-->
<!--[if !IE]>

<!-->

<html lang="en">


<!--<![endif]-->


<head>

    <title>Using turn.js and the new zoom feature</title>

    <meta name="viewport" content="width = 1050, user-scalable = no" />

    <link href="css/magazine.css" rel="stylesheet" type="text/css">

    <script type="text/javascript" src="js/jquery.min.1.7.js"></script>

    <script type="text/javascript" src="js/modernizr.2.5.3.min.js"></script>

    <script type="text/javascript" src="js/hash.js"></script>

    <script type="text/javascript" src="js/turn.js"></script>

    <script type="text/javascript" src="js/turn.html4.min.js"></script>

    <script type="text/javascript" src="js/zoom.min.js"></script>

    <script type="text/javascript" src="js/magazine.js"></script>

    <script>

        $(function () {

            var next_button = $(".next-button");              //初始化左右箭头

            var previous_button = $(".previous-button");

            setArrows();

        });


    </script>

</head>


<body>
    <div id="canvas">

        <a class="icon quit"></a>

        <div class="magazine-viewport">

            <div class="container">

                <div class="magazine">


                </div>

            </div>
            <!-- Next button -->
            <div ignore="1" class="next-button">

            </div>

            <!-- Previous button -->

            <div ignore="1" class="previous-button">

            </div>

        </div>

    </div>
    <script type="text/javascript">

        var bookId = window.location.href.split("bookId=")[1];

        if (bookId) {

            console.log(bookId);

        }

        //图片源
        var imgSrcArr = [
            "pages/1.png",
            "pages/2-1.png",
            "pages/2-2.png",
            // "pages/2.png",
            "pages/3.png",
            "pages/4.png",
            "pages/5.png",
            "pages/6.png",
            "pages/7.png",
            "pages/8.png",
            "pages/9.png",
            "pages/10.png",
            // "pages/11.png",
            "pages/11-1.png",
            "pages/11-2.png",
            "pages/12.png"
        ];
        /* 判断第二页是插入空白页，还是原本有第二页,
        一张被裁减的图片，会有2-1.png的命名，所以判断是否有中划线 */
        //判断第二页是否需要插入空白页，没有-分隔，则需要插入空白页
        if (imgSrcArr[1].indexOf("-") === -1) {
            imgSrcArr.splice(1,0,"blankPage");
        }
        //判断倒数第二张，如果为单张，插入空白页
        if(imgSrcArr[imgSrcArr.length-2].indexOf("-") === -1){
            imgSrcArr.splice(imgSrcArr.length-1,0,"blankPage");
        }
        // console.log(imgSrcArr);
        //书的总页数
        var bookPages = imgSrcArr.length;

        function loadApp() {

            $('#canvas').fadeIn(1000);

            var flipbook = $('.magazine');

            // Check if the CSS was already loaded

            if (flipbook.width() == 0 || flipbook.height() == 0) {

                setTimeout(loadApp, 10);

                return;

            }
            //从数据库得到的最大书页图片的宽高
            var maxWidth = 1687;
            var maxHeight = 3002;
            
            // 创建flipbook

            var bookWidth = (maxWidth / (maxHeight / 600)*2).toFixed(0),
                bookHeight = 600;
            console.log(bookWidth, bookHeight);
            
            flipbook.turn({

                // width: 1000,
    
                // height: 600,

                width: bookWidth,

                height: bookHeight,

                duration: 700,   //翻页速度，值越小越快

                // Hardware acceleration

                acceleration: !isChrome(),

                // Enables gradients

                gradients: true,

                // Auto center this flipbook

                autoCenter: true,

                // Elevation from the edge of the flipbook when turning a page

                elevation: 50,

                // The number of pages

                pages: bookPages,

                // Events

                when: {

                    turning: function (event, page, view) {

                        var book = $(this),

                            currentPage = book.turn('page'),

                            pages = book.turn('pages');

                        // Update the current URI

                        Hash.go('page/' + page).update();

                        // Show and hide navigation buttons

                        disableControls(page);

                    },

                    turned: function (event, page, view) {

                        disableControls(page);

                        $(this).turn('center');

                        if (page == 1) {

                            $(this).turn('peel', 'br');

                        }

                    },

                    missing: function (event, pages) {
                        // Add pages that aren't in the magazine
                        // console.log(pages);
                        for (var i = 0; i < pages.length; i++)
                            addPage(pages[i], $(this),imgSrcArr);

                    }

                }

            });

            // Zoom.js

            $('.magazine-viewport').zoom({

                flipbook: $('.magazine'),

                max: function () {

                    return largeMagazineWidth() / $('.magazine').width();

                },

                when: {

                    swipeLeft: function () {

                        $(this).zoom('flipbook').turn('next');

                    },

                    swipeRight: function () {

                        $(this).zoom('flipbook').turn('previous');

                    },


                    resize: function (event, scale, page, pageElement) {

                        if (scale == 1)

                            loadSmallPage(page, pageElement);

                        else

                            loadLargePage(page, pageElement);

                    },

                    zoomIn: function () {

                        $('.made').hide();

                        $('.magazine').removeClass('animated').addClass('zoom-in');

                        $('.zoom-icon').removeClass('zoom-icon-in').addClass('zoom-icon-out');

                        if (!window.escTip && !$.isTouch) {

                            escTip = true;

                            $('<div />', { 'class': 'exit-message' }).html('<div>Press ESC to exit</div>').appendTo($('body')).delay(2000).animate({ opacity: 0 }, 500, function () {

                                $(this).remove();

                            });

                        }

                    },

                    zoomOut: function () {

                        $('.exit-message').hide();

                        $('.thumbnails').fadeIn();

                        $('.made').fadeIn();

                        $('.zoom-icon').removeClass('zoom-icon-out').addClass('zoom-icon-in');

                        setTimeout(function () {

                            $('.magazine').addClass('animated').removeClass('zoom-in');

                            resizeViewport();

                        }, 0);

                    }

                }

            });


            // Zoom event

            // if ($.isTouch)

            // 	$('.magazine-viewport').bind('zoom.doubleTap', zoomTo);

            // else

            // 	$('.magazine-viewport').bind('zoom.tap', zoomTo);

            // Using arrow keys to turn the page

            $(document).keydown(function (e) {

                var previous = 37, next = 39, esc = 27;

                switch (e.keyCode) {

                    case previous:

                        // left arrow

                        $('.magazine').turn('previous');

                        e.preventDefault();

                        break;

                    case next:

                        //right arrow

                        $('.magazine').turn('next');

                        e.preventDefault();

                        break;

                    case esc:

                        $('.magazine-viewport').zoom('zoomOut');

                        e.preventDefault();

                        break;

                }

            });


            // URIs - Format #/page/1

            Hash.on('^page\/([0-9]*)$', {

                yep: function (path, parts) {

                    var page = parts[1];

                    if (page !== undefined) {

                        if ($('.magazine').turn('is'))

                            $('.magazine').turn('page', page);

                    }

                },

                nop: function (path) {

                    if ($('.magazine').turn('is'))

                        $('.magazine').turn('page', 1);

                }

            });

            $(window).resize(function () {

                resizeViewport();

            }).bind('orientationchange', function () {

                resizeViewport();

            });


            // Events for thumbnails

            $('.thumbnails').click(function (event) {

                var page;

                if (event.target && (page = /page-([0-9]+)/.exec($(event.target).attr('class')))) {

                    $('.magazine').turn('page', page[1]);

                }

            });

            $('.thumbnails li').bind($.mouseEvents.over, function () {

                $(this).addClass('thumb-hover');


            }).bind($.mouseEvents.out, function () {


                $(this).removeClass('thumb-hover');


            });


            if ($.isTouch) {

                $('.thumbnails').addClass('thumbanils-touch').bind($.mouseEvents.move, function (event) {

                    event.preventDefault();

                });

            } else {

                $('.thumbnails ul').mouseover(function () {

                    $('.thumbnails').addClass('thumbnails-hover');

                }).mousedown(function () {

                    return false;

                }).mouseout(function () {

                    $('.thumbnails').removeClass('thumbnails-hover');

                });

            }


            // Regions

            if ($.isTouch) {

                $('.magazine').bind('touchstart', regionClick);

            } else {

                $('.magazine').click(regionClick);

            }


            // Events for the next button

            $('.next-button').bind($.mouseEvents.over, function () {

                $(this).addClass('next-button-hover');

            }).bind($.mouseEvents.out, function () {

                $(this).removeClass('next-button-hover');

            }).bind($.mouseEvents.down, function () {

                $(this).addClass('next-button-down');

            }).bind($.mouseEvents.up, function () {

                $(this).removeClass('next-button-down');

            }).click(function () {

                $('.magazine').turn('next');

                setTimeout(function () {

                    setArrows();

                }, 300);

            });


            // Events for the next button

            $('.previous-button').bind($.mouseEvents.over, function () {

                $(this).addClass('previous-button-hover');

            }).bind($.mouseEvents.out, function () {

                $(this).removeClass('previous-button-hover');

            }).bind($.mouseEvents.down, function () {

                $(this).addClass('previous-button-down');

            }).bind($.mouseEvents.up, function () {

                $(this).removeClass('previous-button-down');

            }).click(function () {

                $('.magazine').turn('previous');

                setTimeout(function () {

                    setArrows();

                }, 300);


            });

            resizeViewport();

            $('.magazine').addClass('animated');

        }


        // Zoom icon

        $('.zoom-icon').bind('mouseover', function () {

            if ($(this).hasClass('zoom-icon-in'))

                $(this).addClass('zoom-icon-in-hover');

            if ($(this).hasClass('zoom-icon-out'))

                $(this).addClass('zoom-icon-out-hover');

        }).bind('mouseout', function () {

            if ($(this).hasClass('zoom-icon-in'))

                $(this).removeClass('zoom-icon-in-hover');

            if ($(this).hasClass('zoom-icon-out'))

                $(this).removeClass('zoom-icon-out-hover');

        }).bind('click', function () {

            if ($(this).hasClass('zoom-icon-in'))

                $('.magazine-viewport').zoom('zoomIn');

            else if ($(this).hasClass('zoom-icon-out'))

                $('.magazine-viewport').zoom('zoomOut');

        });

        $('#canvas').hide();


        $(".quit").bind("click", function () {
            window.location.href = "index.html";
        });

        // Load the HTML4 version if there's not CSS transform

        yepnope({

            test: Modernizr.csstransforms,

            yep: ['js/turn.js'],

            nope: ['js/turn.html4.min.js'],

            both: ['js/zoom.min.js', 'js/magazine.js', 'css/magazine.css'],

            complete: loadApp

        });


    </script>


</body>


</html>

<![endif]--></div>


</html>


</html>


</html>


</html>